<template>
  <a-config-provider :theme="{ token: { colorPrimary: '#108ee9' } }">
    <div
      class="tabs-view-container"
      @contextmenu.prevent="showClickAllBtn"
      @click="closeClickAllBtn"
    >
      <router-link
        class="tabs-view-item"
        :class="isActive(tag) ? 'active' : ''"
        v-for="(tag, index) in visitedTabsView"
        :to="{ path: tag.path, query: tag.query }"
        :key="index"
      >
       <!--  <a-tag
          v-if="tag.name === '电站总览'"
          :disable-transitions="false"
          @close.prevent.stop="handleClose(tag)"
          effect="plain"
        >
          {{ tag.name }}
        </a-tag> -->
        <a-tag
          :closable="visitedTabsView.length !== 1"
          :disable-transitions="false"
          @close.prevent.stop="handleClose(tag)"
          effect="plain"
        >
          {{ tag.name }}
        </a-tag>
      </router-link>
      <div class="clickRightClose">
        <div class="closeBtn" @click="closeCurrent">关闭当前</div>
        <div class="closeBtn" @click="closeOther">关闭其他</div>
        <div class="closeBtn" @click="closeRight">关闭右侧</div>
        <div class="closeBtn" @click="closeLeft">关闭左侧</div>
      </div>
    </div>
  </a-config-provider>
</template>

<script setup>
// 

import { useTabViewStore } from "@/stores/tabView"
import { ConfigProvider } from 'ant-design-vue'

const tabViewStore = useTabViewStore()
const router = useRouter()
const route = useRoute()
const props = defineProps({
  menuList: {
    type: Array,
    default: () => [],
  },
})

// 访问过的页面tab列表
const visitedTabsView = computed(() => tabViewStore.visitedViews.filter((item) => item.name !== '暂无权限'))

// 添加tab
const addTabsView = () => {
  const { name, path, meta, query } = route
  if (name) {
    // 递归将多维菜单数组打平为一维数组
    const flattenMenuList = (list) => {
      return list.reduce((acc, cur) => {
        const items = [cur]
        if (cur.children) {
          items.push(...flattenMenuList(cur.children))
        }
        return acc.concat(items)
      }, [])
    }

    // 打平菜单数组并查找匹配的菜单项
    const flatMenuList = flattenMenuList(menuList.value)

    const matchedMenu = flatMenuList.find((item) => item.path === path)
    tabViewStore.addVisitedView({
      name: matchedMenu ? matchedMenu.name : meta.title || name,
      path,
      query,
    })
  }
}

// 判断是否是当前激活的tab
const isActive = (tag) => {
  return tag.path === route.path || tag.name === route.name
}

// 关闭tab
const handleClose = (tag) => {
  tabViewStore.delVisitedView(tag).then((tags) => {
    if (isActive(tag)) {
      const lastTag = tags.slice(-1)[0]
      if (lastTag) {
        router.push(lastTag.path)
      } else {
        router.push("/FrontPage/StationOverview")
      }
    }
  })
}

// 显示右键菜单
const showClickAllBtn = (e) => {
  if (visitedTabsView.value.length > 1 && e.target.nodeName === "SPAN") {
    const closeBtn = document.querySelector(".clickRightClose")
    closeBtn.style.display = "block"
    closeBtn.style.left = e.clientX - 30 + "px"
    closeBtn.style.top = e.clientY + "px"
  }
}

// 关闭右键菜单
const closeClickAllBtn = (e) => {
  if (e.target.className === "tabs-view-container") {
    const closeBtn = document.querySelector(".clickRightClose")
    closeBtn.style.display = "none"
  }
}

// 关闭当前
const closeCurrent = () => {
  const currentIndex = visitedTabsView.value.findIndex(
    (item) => item.path === route.path
  )
  tabViewStore.delVisitedView(visitedTabsView.value[currentIndex]).then(() => {
    const closeBtn = document.querySelector(".clickRightClose")
    closeBtn.style.display = "none"
    if (currentIndex > 0) {
      router.push(visitedTabsView.value[currentIndex - 1].path)
    } else {
      router.push("/")
    }
  })
}

// 关闭其他
const closeOther = () => {
  tabViewStore.delOtherViews(route).then(() => {
    const closeBtn = document.querySelector(".clickRightClose")
    closeBtn.style.display = "none"
  })
}

// 关闭右侧
const closeRight = () => {
  const currentIndex = visitedTabsView.value.findIndex(
    (item) => item.path === route.path
  )
  tabViewStore.delRightViews(currentIndex).then(() => {
    const closeBtn = document.querySelector(".clickRightClose")
    closeBtn.style.display = "none"
  })
}

// 关闭左侧
const closeLeft = () => {
  const currentIndex = visitedTabsView.value.findIndex(
    (item) => item.path === route.path
  )
  tabViewStore.delLeftViews(currentIndex).then(() => {
    const closeBtn = document.querySelector(".clickRightClose")
    closeBtn.style.display = "none"
  })
}

// 监听路由变化
watch(route, () => {
  addTabsView()
})
const menuList = ref([])
watch(
  () => props.menuList,
  (val) => {
    menuList.value = val
    addTabsView()
  },
  { deep: true, immediate: true }
)
// 初始化时添加当前页面到tab
onMounted(() => {})
</script>

<style lang="less" scoped>
.tabs-view-container {
  padding: 0 0 10px 0;
  background: #001529;
  /* border-bottom: 1px solid #374151; */
  //margin-bottom: 10px;
  //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  // scrollbar-width: thin;
  &::-webkit-scrollbar {
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background: #1f2937;
  }

  .tabs-view-item {
    display: inline-block;

    .ant-tag {
      margin: 0 3px;
      cursor: pointer;
      height: 26px;
      line-height: 24px;
      border: 1px solid #4b5563;
      padding: 0 8px;
      border-radius: 4px;
      color: #e5e7eb;
      background: transparent;

      &:hover {
        color: #60a5fa;
        border-color: #60a5fa;
      }
    }

    &.active {
      .ant-tag {
        color: #ffffff;
        border-color: #108ee9;
        background-color: #108ee9;
        &:before {
          position: relative;
          content: "";
          background: #fff;
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 2px;
        }
      }
    }
  }

  .clickRightClose {
    display: none;
    position: fixed;
    background: #1f2937;
    border: 1px solid #374151;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    padding: 5px 0;
    z-index: 3000;

    .closeBtn {
      padding: 7px 16px;
      cursor: pointer;
      font-size: 14px;
      color: #e5e7eb;

      &:hover {
        background: #374151;
      }
    }
  }
}
</style>
